<template>
	<svg :class="svgClass" v-bind="$attrs" :style="{color: fill}">
		<use :xlink:href="`#icon-${name}`" />
	</svg>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
	name: {
		type: String,
		required: true
	},
	fill: {
		type: String,
		default: ""
	}
});

const svgClass = computed(() => {
	if (props.name) {
		return `svg-icon icon-${props.name}`;
	}
	return "svg-icon";
});
</script>

<style scoped>
.svg-icon {
	fill: currentColor;
}
</style>